import { Table, Popconfirm, Button, Typography, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import moment from 'moment';
import { HeartFilled } from '@ant-design/icons';
const { Text, Link } = Typography;

async function queryProductList(address: string) {
  const list = `https://api.helium.io/v1/accounts/${address}/hotspots`;
  let {
    data: { data },
  } = await axios.get(list);
  for (let rig of data) {
    rig.status = rig.status.online;
    const pocTime = await blockAtHeight(rig.last_poc_challenge);
    rig.pocTime = pocTime;
    // rig.pocTime = pocTime && moment(pocTime).format("MM-DD HH:mm")
    const changeTime = await blockAtHeight(rig.last_change_block);
    rig.changeTime = changeTime && moment(changeTime).format('MM-DD HH:mm');

    // daily Reward
    const reward = await getDailyReward(rig.address);
    rig.reward = reward == 0 ? '0' : reward.toFixed(4);
  }
  return data;
}

async function blockAtHeight(height: number) {
  if (!height) return null;
  const url = 'https://api.helium.io/v1/blocks/' + height;
  const {
    data: {
      data: { time },
    },
  } = await axios.get(url);
  return time * 1000;
}

async function getDailyReward(hotpot: string) {
  const url = `https://api.helium.io/v1/hotspots/${hotpot}/rewards/sum`;
  const {
    data: {
      data: { total },
    },
  } = await axios.get(url, {
    params: {
      max_time: moment().format(),
      min_time: '-24 hour',
    },
  });
  console.log(total);
  return total;
}

const Hotpots: React.FC<any> = ({ onDelete, hotpots, address }) => {
  const [pot, setPot] = useState<any>([]);
  const [loading, setLoading] = useState<Boolean>(true);

  useEffect(() => {
    (async function () {
      const data = await queryProductList(address);
      setPot(data);
      setLoading(false);
    })();
  }, []);

  const columns = [
    {
      title: 'status',
      dataIndex: 'status',
      render: (status) => (
        <>
          {status === 'online' ? (
            <HeartFilled style={{ color: '#52c41a' }} />
          ) : (
            <HeartFilled style={{ color: '#ffc769' }} />
          )}
        </>
      ),
    },
    {
      title: 'Name',
      dataIndex: 'name',
      render: (name, record) => {
        return (
          <Link
            href={`https://explorer-v1.helium.com/hotspots/${record.address}`}
            target="_blank"
          >
            {name}
          </Link>
        );
      },
    },
    {
      title: 'pocTime',
      dataIndex: 'pocTime',
      render: (text, record) => {
        if (!text) return <></>;
        let oneDay = moment(text).add(1, 'd').isAfter(moment());
        return (
          <Text type={oneDay ? 'success' : 'secondary'}>
            {' '}
            {moment(text).format('MM-DD HH:mm')}{' '}
          </Text>
        );
      },
      sorter: (a, b) => a.pocTime - b.pocTime,
      defaultSortOrder: 'descend',
    },
    {
      title: 'changeTime',
      dataIndex: 'changeTime',
    },
    {
      title: 'Reward(HNT)',
      dataIndex: 'reward',
    },
    {
      title: 'Actions',
      render: (text, record) => {
        return <Button>Activity</Button>;
      },
    },
  ];
  return (
    <Table
      loading={loading}
      rowKey="address"
      pagination={false}
      dataSource={pot}
      columns={columns}
      sortDirections={['descend', 'ascend']}
      size="small"
    />
  );
};

export default Hotpots;
